<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="zhilutianji">
    
    <title>
        
            sass入门-1 |
        
        指路天极&#39;s blog
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="https://tostar.site/favicon.ico">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"blog.starlibrary.online","root":"/","language":"zh-CN","path":"search.json"};
    KEEP.theme_config = {"toc":{"enable":true,"number":true,"expand_all":true,"init_open":false},"style":{"primary_color":"#0066CC","avatar":"https://pic-1259449422.cos.ap-shanghai.myqcloud.com/w.jpg","favicon":"https://tostar.site/favicon.ico","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"My Guiding Star ( o゜▽゜ ) o ☆ ."},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":true}}},"local_search":{"enable":true,"preload":false},"code_copy":{"enable":true,"style":"default"},"pjax":{"enable":true},"lazyload":{"enable":true},"version":"3.4.3"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
<div class="progress-bar-container">
    

    
        <span class="pjax-progress-bar"></span>
        <span class="pjax-progress-icon">
            <i class="fas fa-circle-notch fa-spin"></i>
        </span>
    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
                <a class="logo-image" href="/">
                    <img src="https://starlibrary.online/favicon.ico">
                </a>
            
            <a class="logo-title" href="/">
                指路天极&#39;s blog
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/links"
                            >
                                友链
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于
                            </a>
                        </li>
                    
                    
                        <li class="menu-item search search-popup-trigger">
                            <i class="fas fa-search"></i>
                        </li>
                    
                </ul>
            </div>
            <div class="mobile">
                
                    <div class="icon-item search search-popup-trigger"><i class="fas fa-search"></i></div>
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/links">友链</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">sass入门-1</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="https://pic-1259449422.cos.ap-shanghai.myqcloud.com/w.jpg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">zhilutianji</span>
                        
                            <span class="author-label">Lv3</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;2022-02-10 09:08:43
    </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/sass/">sass</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>877 字</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>3 分钟</span>
        </span>
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h1 id="sass入门"><a href="#sass入门" class="headerlink" title="sass入门"></a>sass入门</h1><p>学习自<a class="link"   target="_blank" rel="noopener" href="https://juejin.cn/post/6971458017267187719" >https://juejin.cn/post/6971458017267187719<i class="fas fa-external-link-alt"></i></a></p>
<blockquote>
<p>sass是最早的css预处理语言，有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受，所以使用率不高，不过由于其强大的功能和Ruby on Rails 的大力推动，逐渐被更多开发者使用。</p>
</blockquote>
<blockquote>
<p>sass是采用的Ruby语言编写的一款css预处理语言，它诞生于2007年，是最早成熟css预处理语言。最初它是为了配合haml而设计的，因此有着和haml一样的缩进式风格。</p>
</blockquote>
<blockquote>
<p>sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss。</p>
</blockquote>
<h2 id="sass是css的预编译语言，css扩展语言"><a href="#sass是css的预编译语言，css扩展语言" class="headerlink" title="sass是css的预编译语言，css扩展语言"></a>sass是css的预编译语言，css扩展语言</h2><h2 id="安装sass"><a href="#安装sass" class="headerlink" title="安装sass"></a>安装sass</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add sass-loader sass</span><br></pre></td></tr></table></figure>

<h2 id="编译sass为css"><a href="#编译sass为css" class="headerlink" title="编译sass为css"></a>编译sass为css</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sass input.scss ouput.css</span><br></pre></td></tr></table></figure>

<p>表示将input.sass编译为output.css</p>
<h3 id="监视sass变化并编译"><a href="#监视sass变化并编译" class="headerlink" title="监视sass变化并编译"></a>监视sass变化并编译</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sass --watch input.scss:ouput.css</span><br></pre></td></tr></table></figure>

<p>表示监视变化，当input.scss一变化，output.css就变化</p>
<h3 id="监视文件夹"><a href="#监视文件夹" class="headerlink" title="监视文件夹"></a>监视文件夹</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sass --watch yuan:bian</span><br></pre></td></tr></table></figure>

<p>表示：当名字为yuan这个文件夹里任意一个.scss后缀的文件变化时，就将其编译到名字bian这个文件夹里面（会自动生成相应的.css文件）</p>
<h2 id="基础用法"><a href="#基础用法" class="headerlink" title="基础用法"></a>基础用法</h2><h3 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h3><p>定义一个变量：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$yanse:rgb(122,122,122)</span><br></pre></td></tr></table></figure>

<p>使用：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">i&#123;</span><br><span class="line">  color:$yanse;  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>套娃：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$yanse:rgb(122,122,122)</span><br><span class="line">$kuang:1px solid $yanse;</span><br></pre></td></tr></table></figure>

<h3 id="嵌套"><a href="#嵌套" class="headerlink" title="嵌套"></a>嵌套</h3><p>例如：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">div&#123;</span><br><span class="line">    height:100px;</span><br><span class="line">    ul&#123;</span><br><span class="line">        height:80px;</span><br><span class="line">        li&#123;</span><br><span class="line">            height:50px;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>伪类选择器：&amp;:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">div&#123; </span><br><span class="line">    height: 100px; </span><br><span class="line">    ul&#123; </span><br><span class="line">        height: 80px; </span><br><span class="line">        li&#123; </span><br><span class="line">            height: 50px; </span><br><span class="line">            &amp;:hover &#123;</span><br><span class="line">                color: #000; </span><br><span class="line">            &#125; </span><br><span class="line">        &#125; </span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>属性嵌套：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">div&#123;</span><br><span class="line">    border: 1px solid red &#123;</span><br><span class="line">        left: 0; </span><br><span class="line">        top: 0; </span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>相当于：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">div &#123;</span><br><span class="line">    border: 1px solid red;</span><br><span class="line">    border-left: 0;</span><br><span class="line">    border-top: 0; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="mixin-混入（相当于预先写好了一组样式，其它地方直接引用）"><a href="#mixin-混入（相当于预先写好了一组样式，其它地方直接引用）" class="headerlink" title="mixin 混入（相当于预先写好了一组样式，其它地方直接引用）"></a>mixin 混入（相当于预先写好了一组样式，其它地方直接引用）</h2><h3 id="基本语法"><a href="#基本语法" class="headerlink" title="基本语法"></a>基本语法</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">@mixin 名字（参数1，参数2，...） &#123;</span><br><span class="line">    ........样式....... </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>例：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">@mixin hunhe &#123; </span><br><span class="line">    color: red; </span><br><span class="line">    a &#123; </span><br><span class="line">        font-size: 12px; </span><br><span class="line">    &#125; </span><br><span class="line">&#125; </span><br><span class="line">div&#123;</span><br><span class="line">    @include hunhe; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>相当于：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">div &#123; color: red; &#125; </span><br><span class="line">div a &#123; font-size: 12px; &#125;</span><br></pre></td></tr></table></figure>

<h3 id="带参数"><a href="#带参数" class="headerlink" title="带参数"></a>带参数</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">@mixin hunhe($one,$two) &#123; </span><br><span class="line">    color: $one; </span><br><span class="line">    a &#123; </span><br><span class="line">        color: $one; font-size: $two; </span><br><span class="line">    &#125; </span><br><span class="line">&#125; </span><br><span class="line">div&#123; </span><br><span class="line">    @include hunhe(red,15px); </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>或：(指定参数名，可以变换参数位置)</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">div&#123; @include hunhe($two:15px,$one:red); &#125;</span><br></pre></td></tr></table></figure>

<h2 id="继承-扩展（一个选择器可以继承另一个选择器的全部样式）"><a href="#继承-扩展（一个选择器可以继承另一个选择器的全部样式）" class="headerlink" title="继承/扩展（一个选择器可以继承另一个选择器的全部样式）"></a>继承/扩展（一个选择器可以继承另一个选择器的全部样式）</h2><p>例如：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">.one&#123;</span><br><span class="line">    color: #000;</span><br><span class="line">&#125; </span><br><span class="line">.one a&#123; </span><br><span class="line">    font-size: 10px; </span><br><span class="line">&#125; </span><br><span class="line">.two&#123; </span><br><span class="line">    @extend .one; </span><br><span class="line">    background-color: #fff; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>.two会继承.one的所有样式，包括子代<br>相当于：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">.one, .two &#123; </span><br><span class="line">    color: #000; </span><br><span class="line">&#125; </span><br><span class="line">.one a, .two a &#123; </span><br><span class="line">    font-size: 10px; </span><br><span class="line">&#125; </span><br><span class="line">.two &#123;</span><br><span class="line">    background-color: #fff;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="import-引入文件"><a href="#import-引入文件" class="headerlink" title="@import 引入文件"></a>@import 引入文件</h2><p>Sass 中 <code>@import</code> 指令则可以位于文件中的任意位置。</p>
<h3 id="引入scss文件"><a href="#引入scss文件" class="headerlink" title="引入scss文件"></a>引入scss文件</h3><p>使用<code>@import &quot;colors&quot;;</code>引入colors.scss文件</p>
<h3 id="使用SCSS部分文件"><a href="#使用SCSS部分文件" class="headerlink" title="使用SCSS部分文件"></a><strong>使用SCSS部分文件</strong></h3><p>当通过<code>@import</code>把<code>scss</code>样式分散到多个文件时，你通常只想生成少数几个<code>css</code>文件。那些专门为<code>@import</code>命令而编写的<code>scss</code>文件，并不需要生成对应的独立<code>css</code>文件，这样的<code>scss</code>文件称为局部文件。对此，<code>sass</code>有一个特殊的约定来命名这些文件。</p>
<p>即<em><strong>在文件名前加 _</strong></em><br>注意，此引入的不会生成该文件的css文件<br>例：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">@import &quot;themes/night-sky&quot;;</span><br></pre></td></tr></table></figure>

<h3 id="默认变量值"><a href="#默认变量值" class="headerlink" title="默认变量值"></a>默认变量值</h3><p>一般情况下，后面的变量值会覆盖前面的变量值<br>我们可以通过加!default<br>例如：<br>有blue.scss文件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$link-color: blue !default;</span><br></pre></td></tr></table></figure>

<p>我们在文件中导入</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$link-color: red;</span><br><span class="line">@import &#x27;blue&#x27;</span><br></pre></td></tr></table></figure>

<p>此时颜色为红色</p>

        </div>

        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/post/%E7%99%BB%E5%BD%95%E5%8F%8A%E6%9D%83%E9%99%90%E6%A8%A1%E5%9D%97.html"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">登录及权限模块</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/post/js%E6%92%9E%E5%9D%91%E5%AE%9E%E5%BD%95%EF%BC%88%E4%B8%8D%E6%98%AF%EF%BC%89.html"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">js撞坑实录（不是）</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>&nbsp;-&nbsp;
            
            2022&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">zhilutianji</a>
        </div>
        
            <script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                    <span id="busuanzi_container_site_uv">
                        访问人数&nbsp;<span id="busuanzi_value_site_uv"></span>&ensp;
                    </span>
                
                
                    <span id="busuanzi_container_site_pv">
                        总访问量&nbsp;<span id="busuanzi_value_site_pv"></span>
                    </span>
                
            </div>
        
        <div class="theme-info info-item">
            由 <a target="_blank" href="https://hexo.io">Hexo</a> 驱动&nbsp;|&nbsp;主题&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.3</a>
        </div>
        
            <div class="icp-info info-item"><a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn">津ICP备20000024号</a></div>
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="arrow-up fas fa-arrow-up"></i>
                <span class="percent"></span>
            </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#sass%E5%85%A5%E9%97%A8"><span class="nav-number">1.</span> <span class="nav-text">sass入门</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#sass%E6%98%AFcss%E7%9A%84%E9%A2%84%E7%BC%96%E8%AF%91%E8%AF%AD%E8%A8%80%EF%BC%8Ccss%E6%89%A9%E5%B1%95%E8%AF%AD%E8%A8%80"><span class="nav-number">1.1.</span> <span class="nav-text">sass是css的预编译语言，css扩展语言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E8%A3%85sass"><span class="nav-number">1.2.</span> <span class="nav-text">安装sass</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BC%96%E8%AF%91sass%E4%B8%BAcss"><span class="nav-number">1.3.</span> <span class="nav-text">编译sass为css</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%91%E8%A7%86sass%E5%8F%98%E5%8C%96%E5%B9%B6%E7%BC%96%E8%AF%91"><span class="nav-number">1.3.1.</span> <span class="nav-text">监视sass变化并编译</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%91%E8%A7%86%E6%96%87%E4%BB%B6%E5%A4%B9"><span class="nav-number">1.3.2.</span> <span class="nav-text">监视文件夹</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95"><span class="nav-number">1.4.</span> <span class="nav-text">基础用法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%98%E9%87%8F"><span class="nav-number">1.4.1.</span> <span class="nav-text">变量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B5%8C%E5%A5%97"><span class="nav-number">1.4.2.</span> <span class="nav-text">嵌套</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#mixin-%E6%B7%B7%E5%85%A5%EF%BC%88%E7%9B%B8%E5%BD%93%E4%BA%8E%E9%A2%84%E5%85%88%E5%86%99%E5%A5%BD%E4%BA%86%E4%B8%80%E7%BB%84%E6%A0%B7%E5%BC%8F%EF%BC%8C%E5%85%B6%E5%AE%83%E5%9C%B0%E6%96%B9%E7%9B%B4%E6%8E%A5%E5%BC%95%E7%94%A8%EF%BC%89"><span class="nav-number">1.5.</span> <span class="nav-text">mixin 混入（相当于预先写好了一组样式，其它地方直接引用）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95"><span class="nav-number">1.5.1.</span> <span class="nav-text">基本语法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B8%A6%E5%8F%82%E6%95%B0"><span class="nav-number">1.5.2.</span> <span class="nav-text">带参数</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%A7%E6%89%BF-%E6%89%A9%E5%B1%95%EF%BC%88%E4%B8%80%E4%B8%AA%E9%80%89%E6%8B%A9%E5%99%A8%E5%8F%AF%E4%BB%A5%E7%BB%A7%E6%89%BF%E5%8F%A6%E4%B8%80%E4%B8%AA%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E5%85%A8%E9%83%A8%E6%A0%B7%E5%BC%8F%EF%BC%89"><span class="nav-number">1.6.</span> <span class="nav-text">继承&#x2F;扩展（一个选择器可以继承另一个选择器的全部样式）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#import-%E5%BC%95%E5%85%A5%E6%96%87%E4%BB%B6"><span class="nav-number">1.7.</span> <span class="nav-text">@import 引入文件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%95%E5%85%A5scss%E6%96%87%E4%BB%B6"><span class="nav-number">1.7.1.</span> <span class="nav-text">引入scss文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8SCSS%E9%83%A8%E5%88%86%E6%96%87%E4%BB%B6"><span class="nav-number">1.7.2.</span> <span class="nav-text">使用SCSS部分文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%BB%98%E8%AE%A4%E5%8F%98%E9%87%8F%E5%80%BC"><span class="nav-number">1.7.3.</span> <span class="nav-text">默认变量值</span></a></li></ol></li></ol></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    
        <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-input-field-pre">
            <i class="fas fa-keyboard"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="搜索..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="popup-btn-close">
                <i class="fas fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fas fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>

    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>



    
<script src="/js/local-search.js"></script>




    
<script src="/js/code-copy.js"></script>




    
<script src="/js/lazyload.js"></script>



<div class="post-scripts pjax">
    
        
<script src="/js/left-side-toggle.js"></script>

<script src="/js/libs/anime.min.js"></script>

<script src="/js/toc.js"></script>

    
</div>


    
<script src="/js/libs/pjax.min.js"></script>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        window.pjax = new Pjax({
            selectors: [
                'head title',
                '.page-container',
                '.pjax'
            ],
            history: true,
            debug: false,
            cacheBust: false,
            timeout: 0,
            analytics: false,
            currentUrlFullReload: false,
            scrollRestoration: false,
            // scrollTo: true,
        });

        document.addEventListener('pjax:send', () => {
            KEEP.utils.pjaxProgressBarStart();
        });

        document.addEventListener('pjax:complete', () => {
            KEEP.utils.pjaxProgressBarEnd();
            window.pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script'));
            KEEP.refresh();
        });
    });
</script>



</body>
</html>
